import { useEffect } from "react"

// export default function Demo06() {
//   const divRef1 = useRef<HTMLDivElement>(null)
//   const divRef2 = useRef<HTMLDivElement>(null)
//   useLayoutEffect(() => {
//     console.log('useLayoutEffect')
//     // for (let index = 0; index < 20000; index++) {
//     //   console.log(index)
//     // }
//     divRef1.current!.style.transition = 'opacity 6s'
//     divRef1.current!.style.opacity = '1'
//   }, [])
//   useEffect(() => {
//     console.log('useEffect')
//     // for (let index = 0; index < 20000; index++) {
//     //   console.log(index)
//     // }
//     // 实际测试，两个hook 动画都没生效
//     divRef2.current!.style.transition = 'opacity 6s'
//     divRef2.current!.style.opacity = '1'
//   }, [])
  
//   return <>
//     <h1>useLayoutEffect示例</h1>
//     <b style={{ color: '#c33434' }}>注意：useLayoutEffect 会阻塞DOM渲染,而 useEffect 不会。</b>
//     <div>
//       <div ref={divRef1} style={{ opacity: 0 }}>app1</div>
//       <div ref={divRef2}  style={{ opacity: 0 }}>app2</div>
//     </div>
//   </>
// }

// 实际测试，两个hook 表现差不多，所以useLayoutEffect 不用

export default function Demo06() {
  useEffect(() => {
      const list = document.getElementById('list') as HTMLUListElement;
      list.scrollTop = 1200
   }, []);

   return (
      <ul id="list" style={{ height: '500px', overflowY: 'scroll' }}>
         {Array.from({ length: 500 }, (_, i) => (
            <li key={i}>Item {i + 1}</li>
         ))}
      </ul>
   );
}